<template>
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
    <!--顶部个人信息栏-->
	<image src="../../static/images/mine_bg.png" class="iconBac" >
    <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <!-- <view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view> -->
          <image  @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
          </image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title">
             {{name}}
            </view>
          </view>
        </view>
        <view  class="flex align-center">
			<view class="u_role">
				<uni-tag :inverted="true" :text="roleGroup"  type="primary" />
			</view>
          
        </view>
      </view>
    </view>
	
    <view class="content-section">
		  <view class="grid-boxs">
			  <uni-grid :column="2" :showBorder="false">
			  	<uni-grid-item>
			  		<view class="grid-item-box" @click="handleToEditInfo">
			  		  <image src="../../static/images/mine_icon_data.png" class="iconStys" >
			  		  <text class="text">编辑资料</text>
			  		</view>
			  	</uni-grid-item>
			  	<uni-grid-item>
			  		<view class="grid-item-box" @click="handleToPwd">
			  		 <image src="../../static/images/mine_icon_password.png" class="iconStys" >
			  		 <text class="text">修改密码</text>
			  		</view>
			  	</uni-grid-item>
			  </uni-grid>
		  </view>  
		 <view class="grid-boxs">
			 <view class="container">
			   <uni-list>
			     <uni-list-item showExtraIcon="true"  title="用户账号" :rightText="user.userName" />
			     <uni-list-item showExtraIcon="true"  title="手机号码" :rightText="user.phonenumber" />
			     <uni-list-item showExtraIcon="true"  title="用户邮箱" :rightText="user.email" />
			     <uni-list-item showExtraIcon="true"  title="所属组织"  >
					 <template v-slot:body>
							 <view class='box'>
								 <view class="v_title">所属组织</view>
								 <view class="v_text">{{postGroup}}</view>
							 </view>		
						</template>
				 </uni-list-item>
			     <uni-list-item showExtraIcon="true" >
					 <template v-slot:body>
						 <view class='box'>
							 <view class="v_title">所属角色</view>
							 <view class="v_text">{{roleGroup}}</view>
						 </view>		
					</template>
				 </uni-list-item>
			     <uni-list-item showExtraIcon="true"  title="创建日期" :rightText="user.createTime" />
			   </uni-list>
			 </view>
		 </view>
    </view>
	
	<view class="logout" @click="handleLogout">
	  <text class="logout-text">退出登录</text>
	</view>
  </view>
</template>

<script>
  import storage from '@/utils/storage'
  import { getUserProfile } from "@/api/system/user"
  import {listByIds} from "@/api/system/oss";
  export default {
    data() {
      return {
        name: this.$store.state.user.name,
        version: getApp().globalData.config.appInfo.version,
		user: {},
		roleGroup: "",
		postGroup: "",
		avatar:''
      }
    },
	watch:{
		user:{
			deep:true,
			handler(val){
				this.user = val
			},
		},
	},
    computed: {
  //     avatar() {
		// console.log(this.$store.state.user.avatar,11111111)
  //       return this.$store.state.user.avatar
  //     },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
	onShow() {
	  this.getUser()
	},
    methods: {
		getUser() {
		  getUserProfile().then(response => {
			  if(response.code==200){
				  this.user = response.data.user
				  const img = response.data.user.avatar
				  if(img){
					 listByIds(img).then((res)=>{
						 if(res.code==200){
							 this.avatar = res.data[0].url
						 }
					 })
				  }
				  this.roleGroup = response.data.roleGroup
				  this.postGroup = response.data.user.dept.deptName + '/' +  response.data.postGroup
			  }
			
		  })
		},
	handleToPwd() {
	  this.$tab.navigateTo('/pages/mine/pwd/index')
	},
      handleToEditInfo() {
        this.$tab.navigateTo('/pages/mine/info/edit')
      },
      handleToLogin() {
        this.$tab.reLaunch('/pages/login')
      },
      handleToAvatar() {
        this.$tab.navigateTo('/pages/mine/avatar/index')
      },
      handleLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/pages/index')
          })
        })
      },
      handleHelp() {
        this.$tab.navigateTo('/pages/mine/help/index')
      },
      handleAbout() {
        this.$tab.navigateTo('/pages/mine/about/index')
      },
      handleJiaoLiuQun() {
        this.$modal.showToast('QQ群：①133713780、②146013835')
      },
      handleBuilding() {
        this.$modal.showToast('模块建设中~')
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F7F7F7;
  }
  .box{
	  display: flex;
	  justify-content: space-between;
	  width:100%;
	  .v_title{
		  font-size: 14px;
		  color:#3b4144 ;
		  min-width: 56px;
	  }
	  .v_text{
		  text-align: right;
		  font-size: 12px;
		  color:#999 ;
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 2;
		  overflow: hidden;
		  word-break: break-all;  /* break-all(允许在单词内换行。) */
		  text-overflow: ellipsis;  /* 超出部分省略号 */
	  }
  }
  .logout{
  	  display: flex;
  	  align-items: center;
  	  justify-content: center;
  	  width: 90%;
  	  margin: 0 auto;
  	  background:#1890FF ;
	  height: 80rpx;
	  border-radius: 15rpx;
  	  .logout-text{
  		  color: #FFFFFF;
  	  }
  }
  .grid-boxs{
		width: 92%;
		margin: 0 auto;
		border-radius: 8px;
		background-color: white;
		padding:20rpx 12rpx ;
		margin-top: 20rpx;
		.text{
			margin-left: 12rpx;
		}
	}
  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */

    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }
  .iconBac{
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 156px;
  	z-index: -1;
  }
  .iconStys{
  	width: 28px;
  	height: 28px;
  }
	/deep/ .mine-container .uni-grid-item{
		height: 120rpx !important;
	}
  .mine-container {
    width: 100%;
    height: 100%;
	position: relative;

    .header-section {
      padding: 15px 15px 45px 15px;
      color: white;

      .login-tip {
        font-size: 18px;
        margin-left: 10px;
      }
	 

      .cu-avatar {
        border: 2px solid #eaeaea;

        .icon {
          font-size: 40px;
        }
      }

      .user-info {
        margin-left: 15px;

        .u_title {
          font-size: 18px;
          line-height: 30px;
			width: 60px; 
			height: 30px;
			text-overflow: ellipsis;
			overflow: hidden; 
			
        }
      }
    }

    .content-section {
      position: relative;
      top: -50px;

      .mine-actions {
        margin: 15px 15px;
        padding: 20px 0px;
        border-radius: 8px;
        background-color: white;

        .action-item {
			display: flex;
			justify-content: center;
			align-items: center;
          .text {
            display: block;
            font-size: 13px;
            margin: 8px 0px;
          }
        }
      }
    }
  }
  .u_role{
	  display: -webkit-box;
	  -webkit-box-orient:vertical;
	  text-overflow: ellipsis;
	  overflow: hidden;
	  -webkit-line-clamp: 1;
	  line-height: 50upx;
  }
</style>
